<template>
	<div>
		<div class="plr30">
			<div class="plr30 pt30 pb30 radius8" style="box-shadow: 0px 0px 10px  rgba(0, 0, 0, 0.05);">
				<div id="my_line_chart6" style="height: 420px;"></div>
			</div>
		</div>
		<div>
			<div class="pt20 mt25">
				<div class="text-center plr30 border-bottom pb20 relative">
					<span class="fb mr20">列表</span>
					<div class="flex col-center right-btn">
						<el-select v-model="value" placeholder="请选择导出内容" style="width: 150px;" @change="handleExport">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
						<!-- <el-button class="mt5" type="operate">导出</el-button> -->
						<el-button class="ml10" type="defaultBtn">编辑</el-button>
					</div>
				</div>
				<div class="plr30 mt20">
					<el-table :data="tableData" style="width: 100%" height="250"
						:cell-style="{ textAlign: 'center','line-height':'54px'}"
						:header-cell-style="{ 'text-align': 'center','line-height':'54px','height':'54px!important'  }">
						<el-table-column prop="cropYear" label="年份" />
						<el-table-column prop="cropVarietyName" label="作物结构" />
						<el-table-column prop="cropCost" label="农资年投入成本" />
						<el-table-column prop="orderTotal" label="我司销售金额" />
						<el-table-column prop="percentage" label="我司销售占比" />
					</el-table>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import {
		cropStructure
	} from '@/api/business/customer'
	export default {
		props: {
			customerTypeProps: {
				type: Object,
				default: {}
			},
			activeName: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				queryParams: {
					customerId: this.customerTypeProps.userId,
					cropType: ''
				},
				tableData: [],
				lineChart6: null,
				yearArray: [], //年份
				arr1: [],
				arr2: [],
				options: [{
					value: 1,
					label: '作物结构'
				}, {
					value: 2,
					label: '销售情况'
				}, ]
			}
		},
		// mounted() {
		// 	this.lineChart = echarts.init(document.getElementById("my_line_chart2"));
		// 	this.init();
		// },
		watch: {
			activeName() {
				let that = this
				if (this.activeName == 'message6') {
					this.cropStructure()
				}

			}
		},
		created() {

		},
		methods: {
			// 导出
			handleExport(e) {
				this.queryParams.cropType = e
				this.download(
					"/customer/cropStructureExport/", {
						...this.queryParams,
					},
					`cropStructure_${new Date().getTime()}.xlsx`
				);
			},
			cropStructure() {
				let that = this
				cropStructure(this.customerTypeProps.userId).then(res => {
					this.tableData = res.data
					const yearArray = [...new Set(this.tableData.map(item => item.cropYear))].sort((a, b) => a -
					b);
					this.yearArray = yearArray
					let arr1 = []
					let arr2 = []
					for (let key in this.tableData) {
						arr1.push(this.tableData[key].percentage * 1)
						arr2.push(this.tableData[key].orderTotal * 1)
					}
					this.arr1 = arr1 //我司销售占比
					this.arr2 = arr2 //我司销售金额
					setTimeout(() => {
						that.lineChart6 = echarts.init(document.getElementById("my_line_chart6"));
						that.init6();
					}, 200)
				})
			},
			init6() {
				this.lineChart6.setOption({
					title: {
						text: "作物结构及我司销售占比"
					},
					grid: {
						left: "40px",
						right: "10px",
						bottom: "30px",
						containLabel: true
					},
					xAxis: {
						show: true,
						data: this.yearArray, //年份
						splitLine: {
							show: false
						},
						axisTick: {
							show: false,
							length: 20 // 竖线的长度
						}
					},
					yAxis: {
						splitLine: {
							show: true
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: true,
							interval: "auto",
							formatter: "{value}%"
						}
					},
					series: [{
							name: '我司销售占比',
							type: 'line',
							stack: 'Total',
							data: this.arr1
						},
						{
							name: '我司销售金额',
							type: 'line',
							stack: 'Total',
							data: this.arr2
						},
					]
				});
			}
		}
	}
</script>

<style>
	.right-btn {
		position: absolute;
		right: 30px;
		bottom: 10px;
	}
</style>